<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆检查</title>
    <style>
        *{
            margin: 0 auto;
        }
        table{
            border: 1px solid black;
            text-align: center;
            width: 300px;
            height: 150px;
        }
        button{
            width: 100px;
        }
        td{
            border: 1px solid black;
        }
        #prompt{
            color: red;
            font-weight:bold;
        }
    </style>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<form action="/CheckLogin">
    <table>
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username" id="in_user">
<!--                要用行内式写属性写display属性-->
                <p id="prompt" style="display: none">用户名已存在！</p>
            </td>
        </tr>
        <tr>
            <td>密码：</td> <td><input type="password" name="password"></td>
        </tr>
        <tr><td colspan="2"><button type="submit">提交</button></td></tr>
    </table>
</form>
<script>
    document.getElementById("in_user").onblur = function (){
        var name = this.value;
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET", "http://localhost/CheckLogin?username="+name)
        xhttp.send();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                if(this.responseText == "true"){
                    document.getElementById("prompt").style.display = ''
                }else {
                    document.getElementById("prompt").style.display = 'none'
                }
            }
        };
    }
</script>
</body>
</html>